<template>
  <div class="comment-item">
    <div class="comment">
      <img :src="comment.imgUrl" alt="User Image" class="user-img" />
      <div class="comment-content">
        <h4 class="comment-nickName"><strong>{{ comment.nickName ? comment.nickName : "用户404" }}</strong></h4>
        <div class="comment-text">{{ comment.comment }}</div>
        <div class="comment-time">{{ formatDate(comment.createTime) }}</div>
        <el-button class="comment-create" @click="add" v-if="this.comment.parentId == 0" type="primary"
          size="small">回复</el-button>
      </div>
    </div>
    <div class="replies" v-if="comment.replies && comment.replies.length">
      <comment-item v-for="reply in comment.replies" :key="reply.commentId" :comment="reply" />
    </div>
  </div>
</template>

<script>
import { createComments } from '@/api/comments'
export default {
  name: 'CommentItem',
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 从状态管理取数据
      newComment: {
        commentId: this.comment.commentId,
        comment: this.comment.comment,
        createTime: new Date(),
        imgUrl: this.comment.imgUrl,
        nickName: this.comment.nickName,
        replies: [],
        roomId: this.comment.roomId,
        userId: this.comment.userId
      }
    }
  },
  created () {
    console.log('this.comment=========')
    console.log(this.comment)
  },
  methods: {
    formatDate (date) {
      const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }
      return new Date(date).toLocaleDateString(undefined, options)
    },
    async add () {
      // if (this.comment.parentId === 0) {
      //   this.comment.replies.push(this.newComment)
      // }
      this.$prompt('请输入评论内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        createComments(this.comment.roomId, value, this.comment.commentId).then(async () => {
          await this.getComments()
        })
        this.$notify({
          title: '成功',
          message: '评论成功',
          type: 'success'
        })
        location.reload()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
      // const res = await createComments(this.comment.roomId, 1, this.comment.comment)
    }
  }
}
</script>

<style scoped>
.comment-item {
  background-color: #f3f3f3;
  /* width: 62%; */
  margin: 10px 15px;
  padding: 2px 12px;
  border-radius: 20px;
}

.comment {
  display: flex;
  align-items: center;
}

.user-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-nickName {
  margin-bottom: 5px;
}

.comment-text {
  position: relative;
  top: 10px;
  font-size: large;
  /* background-color: #f9f9f9; */
}

.comment-content {
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  height: 100%;
}

.comment-create {
  float: right;
  position: relative;
  /* top: 5px; */
  right: -140px;
}

.comment-time {
  font-size: 0.8em;
  /* color: #888; */
  /* text-align: right; */
  float: right;
  position: relative;
  top: -40px;
  right: -10px;
}

.comment-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.comment-action button {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 0.9em;
}

.comment-action button:hover {}

.replies {
  margin: 0 20px;
  /* border-left: 2px solid #ddd; */
  padding: 0 -30px;
  overflow: hidden;
  border-radius: 20px;
  width: 100%;
}
</style>
